<template>
  <div class="details">
    <topDiv>活动详情页</topDiv>
    <div class="conten" v-if="info">
      <img :src="`http://localhost:3000${info.imgUrl}`" alt />
      <ul>
        <li>
          <h3>{{info.title}}</h3>
        </li>
        <li>
          <p>活动简介：{{info.content}}</p>
        </li>
        <li>
          <p>报名时间：{{info.applyTime|parseTime}}至{{info.endTime|parseTime}}</p>
        </li>
        <li>
          <p>签到时间：{{info.endTime|parseTime}}至{{info.signInEnd|parseTime}}</p>
        </li>
        <li>签到密码现场提供
          <input type="text" v-model="paw" placeholder="请输入签到密码">
        </li>
      </ul>
      <div class="apply" v-if="timeEnd">
        <clickBox>
          <template #text>
            <p v-if="crew">已报名</p>
            <p v-else @click.once="applyHos">点击报名</p>
          </template>
          <template #time>
            <p>{{info.applyTime|parseTime}}至{{info.endTime|parseTime}}</p>
          </template>
        </clickBox>
      </div>
      <div class="end" v-else>
        <clickBox>
          <template #text>
            <p>报名结束</p>
          </template>
          <template #time>
            <p>{{info.endTime|parseTime}}</p>
          </template>
        </clickBox>
      </div>
      <div class="signIn" v-if="sign&&crew">
          <clickBox>
          <template #text>
            <p v-if="isSign==true">已签到</p>
            <p v-else @click.once="signIn">点击签到</p>
          </template>
          <template #time>
            <p>{{info.endTime|parseTime}}至{{info.signInEnd|parseTime}}</p>
          </template>
        </clickBox>
      </div>
    </div>
  </div>
</template>

<script>
import topDiv from "components/share/mine/topDiv";
import clickBox from "components/personal/clickBox";
import { parseCookie } from "ulit/parse";
import { activtyId,apply,signIn } from "request/activity";
export default {
  naem: "details",
  components: {
    topDiv,
    clickBox,
  },
  data() {
    return {
      info: null,
      atTime: Date.now(),
      paw:''
    };
  },
  computed: {
    timeEnd() {//活动报名截至时间
      if (!this.info) return;
      var current = Date.now();
      var end = Date.parse(this.info.endTime);
      if (current > end) {
        return false;
      } else {
        return true;
      }
    },
    crew() {//报名人员是否有我
      if (!this.info) return;
      var people = new Map(this.info.people);
      var cookie = parseCookie();
      return people.has(cookie);
    },
    sign(){ //是否可以签到
      if (!this.info) return;
      var current = Date.now();//当前时间
      var applyEnd=Date.parse(this.info.endTime);//报名结束时间
      var signinEnd=Date.parse(this.info.signInEnd)//签到结束时间
      if(current>applyEnd&&current<signinEnd){
        return true
      }else{
        return false
      }
    },
    isSign(){ //是否签到了
      if (!this.info) return;
      var data= new Map(this.info.people)
      var cookie = parseCookie();
      return data.get(cookie)
    }
  },
  methods: {
    applyHos(){
      apply(this.$route.query.id,[parseCookie(),false]).then(res=>{
        if(res.data.status){
          this.info=res.data.data
          alert('报名成功')
        }else{
          alert('报名失败')
        }
      })
    },
    signIn(){
      signIn(this.$route.query.id,parseCookie(),this.paw).then(res=>{
        if(res.data.status){
          alert(res.data.lay)
        }else{
          alert(res.data.err)
        }
      })
    }
  },
  mounted() {
    activtyId(this.$route.query.id).then((res) => {
      this.info = res.data;
      console.log(this.info);
    });
  },
};
</script>

<style lang="less" scoped>
.details {
  .conten {
    img {
      width: 100%;
    }
    ul {
      li {
        padding: 0.5rem 0;
        border-bottom: 1px solid #e3e3e3;
      }
    }
    .end {
      p {
        text-decoration: line-through;
        text-decoration-color: red;
      }
    }
  }
}
</style>